<template>
  <app-container>
    <app-block>
      <zm-form :model="searchForm" ref="searchForm" inline>
        <zm-form-item prop="productName">
          <zm-input class="w260" v-model="searchForm.productName" placeholder="请输入产品名称" />
        </zm-form-item>
        <zm-form-item>
          <zm-button @click="onSearch" t="search"></zm-button>
          <zm-button @click="onReset" t="reset"></zm-button>
        </zm-form-item>
      </zm-form>
      <zm-button type="success" icon="el-icon-plus" @click="onAdd('create')" class="mb10">新增一级分组</zm-button>
      <zm-table-data
        ref="table"
        :data="tableParams.data"
        :columns="columns"
        :fetch="loadList"
        :table-params="tableParams"
        :show-page="true"
      ></zm-table-data>
      <!-- 一级分组 -->
      <add-first-group
        v-if="addFirstGroupParams.visible"
        v-model="addFirstGroupParams.visible"
        @handle-after="loadList"
        :row-obj="addFirstGroupParams.rowObj"
      ></add-first-group>
      <!-- 二级类目 -->
      <add-second
        v-if="addSecondParams.visible"
        v-model="addSecondParams.visible"
        @handle-after="loadList"
        :row-obj="addSecondParams.rowObj"
      ></add-second>
    </app-block>
    <!-- 查看关联产品 -->
    <look-product v-if="isShowDetail" v-model="isShowDetail" :product-id="productId"></look-product>
  </app-container>
</template>

<script>
import { columns } from './const'
import tableMixin from '@/mixins/zmTableMixin'
import productCategoryApis from '@/api/src/productCategory'
import addFirstGroup from './components/addFirstGroup'
import addSecond from './components/addSecond'
import LookProduct from './components/LookProduct'
export default {
  name: 'ProductList',
  components: { addFirstGroup, addSecond, LookProduct },
  mixins: [tableMixin],
  data () {
    return {
      searchForm: {
        productName: ''
      },
      headTxt: '全部展开',
      isExpand: false,
      addFirstGroupParams: {
        visible: false
      },
      addSecondParams: {
        visible: false
      },
      listTemp: [],
      productId: '',
      isShowDetail: false
    }
  },
  computed: {
    columns () {
      return columns(this)
    }
  },
  watch: {},
  created () {},
  methods: {
    async loadList () {
      console.log('loadList')
      const _res = await productCategoryApis.getPageList(
        this.assignQuery(this.searchForm)
      )
      this.initialTableData(_res.list, _res.count)
    },
    // 一级分组操作按钮
    operation (type, row) {
      switch (type) {
        // 删除
        case 'del':
          this.$confirm(
            `确定将【${row.name}】删除？删除之后，该分组下的二级分组将一并删除，请谨慎操作`,
            '删除',
            {
              type: 'warning'
            }
          )
            .then(async () => {
              await productCategoryApis.delete({ id: row.id })
              this.$message.success('操作成功')
              this.loadList()
            })
            .catch((err) => err)
          break
        // 展开/收起
        case 'expand':
          this.handleExpand(row)
          break

        // 编辑
        case 'edit':
          this.onAdd('edit', row)
          break
        case 'addSecond':
          this.addSecondParams = {
            visible: true,
            rowObj: {
              type: 'addSecond',
              row
            }
          }
          break
      }
    },
    // 二级分组操作按钮
    secondOperation (type, row, idx, parent) {
      switch (type) {
        // 查看关联产品
        case 'look':
          this.handleLook(row)
          break
        case 'edit':
          this.addSecondParams = {
            visible: true,
            rowObj: {
              type: 'edit',
              row,
              parent
            }
          }
          break
        case 'del':
          this.$confirm(
            `确定将【${row.name}】从【${parent.name}】删除？`,
            '删除',
            {
              type: 'warning'
            }
          )
            .then(async () => {
              await productCategoryApis.delete({
                id: row.id
              })
              this.$message.success('操作成功')
              this.loadList()
            })
            .catch((err) => err)
          break
      }
    },
    // 新增/编辑
    onAdd (type, row) {
      this.addFirstGroupParams = {
        visible: true,
        rowObj: {
          type: type,
          row
        }
      }
    },
    // 展开/收起
    handleExpand (row) {
      this.isExpand = !this.isExpand
      this.headTxt = this.isExpand ? '全部收起' : '全部展开'
      this.tableParams.data.forEach((i) => {
        this.$refs.table.$refs.ZmTableData.$refs.zmTable.toggleRowExpansion(
          i,
          this.isExpand
        )
      })
    },
    // 查看关联产品
    handleLook (row) {
      this.isShowDetail = true
      this.productId = row.productId ? row.productId : '0'
    }
  }
}
</script>

<style scoped lang='scss'>
</style>
